<!-- 
Vue 3 的生命周期钩子是指在组件实例的不同阶段自动调用的一系列方法。这些钩子函数可以让开发者在组件的创建、更新和销毁等不同阶段执行特定的代码。以下是 Vue 3 生命周期的总结说明：
  1. 生命周期概述
  Vue 3 组件的生命周期可以分为以下几个主要阶段：

  - 创建（Creation）
  - 挂载（Mounting）
  - 更新（Updating）
  - 销毁（Unmounting）

  2. 生命周期钩子
  1. beforeCreate
  - 调用时机：组件实例被创建之前。
  - 用途：在此阶段，数据观测和事件配置尚未完成，无法访问  `data`  和  `methods` 。

  2. created
  - 调用时机：组件实例创建完成后。
  - 用途：可以访问到  `data` 、 `computed`  和  `methods` ，适合进行数据初始化或异步请求。

  3. beforeMount
  - 调用时机：在挂载开始之前，相关的 DOM 元素尚未被插入。
  - 用途：可以进行一些准备工作，但此时还无法访问到 DOM。

  4. mounted
  - 调用时机：组件挂载到 DOM 之后。
  - 用途：可以访问到 DOM 元素，适合进行与 DOM 相关的操作，例如第三方库的初始化。

  5. beforeUpdate
  - 调用时机：在数据更新之前。
  - 用途：可以在数据变化导致视图更新之前进行一些操作。

  6. updated
  - 调用时机：组件更新后，DOM 重新渲染完成。
  - 用途：可以在视图更新后进行操作，例如获取更新后的 DOM 状态。

  7. beforeUnmount
  - 调用时机：组件实例被销毁之前。
  - 用途：可以进行清理工作，例如移除事件监听器。

  8. unmounted
  - 调用时机：组件实例被销毁后。
  - 用途：可以执行一些清理操作，确保没有内存泄漏。

  3. 生命周期钩子的使用
  在 Vue 3 中，生命周期钩子可以通过选项 API 或组合 API 使用。
  选项 API 示例
  export default {
    data() {
      return {
        message: 'Hello Vue!'
      };
    },
    created() {
      console.log('组件已创建');
    },
    mounted() {
      console.log('组件已挂载');
    },
    beforeUnmount() {
      console.log('组件即将被销毁');
    }
  };
  组合 API 示例
  import { onMounted, onBeforeUnmount } from 'vue';

  export default {
    setup() {
      console.log('组件已创建');

      onMounted(() => {
        console.log('组件已挂载');
      });

      onBeforeUnmount(() => {
        console.log('组件即将被销毁');
      });
    }
  };
  总结
  Vue 3 的生命周期钩子为开发者提供了在组件不同阶段插入代码的机会，方便进行数据处理、事件监听、DOM 操作等。理解这些生命周期钩子的使用时机和用途，有助于更好地管理组件的状态和行为。 
-->
<template>
  <div class="app">
    <h3>message: {{ message }} - {{ counter }}</h3>
    <button @click="message = 'Hello World'">修改message</button>
    <button @click="counter++">+1</button>

    <div>
      <button @click="isShowHome = !isShowHome">显示Home</button>
      <home v-if="isShowHome"></home>
    </div>
  </div>
</template>

<script setup>
  import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from "vue"
  import Home from "./components/Home.vue"

  const message = ref("Hello App")
  const counter = ref(0)
  const isShowHome = ref(true)

  // beforeCreate(() => {
  //   console.log("beforeCreate: 组件创建之前");
  // })
  // beforeCreated.组件被创建完成
  // beforeCreated() {
  //     console.log("created")
  //     console.log("1.发送网络请求, 请求数据")
  //     console.log("2.监听eventbus事件")
  //     console.log("3.监听watch数据")
  // },

  onBeforeMount(() => {
    console.log("onBeforeMount: 组件挂载之前");
  })

  onMounted(() => {
    console.log("onMounted: 组件挂载完成");
    // console.log("1.获取DOM")
    // console.log("2.使用DOM")
  })

  // onBeforeUpdate: 数据发生改变, 准备更新DOM
  onBeforeUpdate(() => {
    console.log("onBeforeUpdate: 组件更新之前");
  })

  onUpdated(() => {
    console.log("onUpdated: 组件更新完成");
  })

  // onBeforeUnmount: 卸载之前, 卸载VNode -> DOM元素
  onBeforeUnmount(() => {
    console.log("onBeforeUnmount: 组件卸载之前");
  })

  // onUnmounted: DOM元素被卸载完成
  onUnmounted(() => {
    console.log("onUnmounted: 组件卸载完成");
  })
</script>

<style lang="scss" scoped></style>
